<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background: linear-gradient(to top,#4d627c 0%,#8997a9 100%);
                font-size: 4em;
                color: #333;
                /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
                text-align: center;
            }
            .overlap{
                font-family:'Luckiest Guy';
                letter-spacing: -10px;
            }
        </style>
	</head>
	<body>
        <h1 class="overlap">Hello World</h1>
        <script>
            const overlap=document.querySelector(".overlap");
            overlap.innerHTML=overlap.textContent.split('').map((c)=>`<span>${c}</span>`).join('');
        </script>
	</body>
</html>